<template>
	<view>
		<view
			class="u-bg-white u-p-20 u-flex u-col-top"
			:class="{ 'u-m-20 article-item-active': isCard, 'u-m-b-2': !isCard }"
			v-for="(item, index) in list"
			:key="index"
			@click="openDetail(item.id)"
		>
			<view class="article-nums" :style="[{ background: numsBackground(item), color: numsColor(item) }]">
				<view class="answers answered">
					<view class="u-font-36">{{ item.voteup }}</view>
					<view>点赞</view>
				</view>
			</view>
			<view class="article-info">
				<view class="u-p-l-10">
					<view class="u-m-b-10 title" :style="[item.underline]">
						<view class="u-m-r-10 flag" v-if="item.flag == 'top' && showTop"><u-tag text="置顶" type="error" size="mini" /></view>
						<view class="price-tag" v-if="item.price > 0">
							<u-icon v-if="item.price > 0" name="rmb" color="#f19049" size="28"></u-icon>
							<text class="">{{ item.price }}</text>
						</view>
						<view class="price-tag" v-if="item.score > 0">
							<u-icon v-if="item.score > 0" name="integral" color="#f19049" size="20"></u-icon>
							<text class="u-m-l-5">{{ item.score }}</text>
						</view>
						<text :style="[item.styleArray]" v-text="item.title"></text>
					</view>
					<view class="u-flex u-flex-wrap u-m-t-10">
						<view class="images" v-for="(res, rk) in item.images_list" :key="rk"><u-image width="100%" height="100%" :src="res"></u-image></view>
					</view>
					<view class="u-tips-color u-p-b-10 u-font-24" v-if="item.summary != ''">{{ item.summary }}</view>
					<view class="u-m-b-10 u-m-t-10 u-flex u-flex-wrap">
						<view class="u-m-r-10 u-m-b-10" v-for="(it, ik) in item.tags" :key="ik" @click.stop="navigateTag(it.id, 'article')">
							<u-tag
								:text="it.name"
								:bg-color="theme.lightColor"
								:border-color="theme.faBorderColor"
								:color="theme.bgColor"
								type="primary"
								mode="light"
								shape="circle"
							/>
						</view>
					</view>
					<view class="u-flex u-font-28">
						<image class="u-avatar-img" :src="item.user && item.user.avatar" mode="aspectFill"></image>
						<view class="u-tips-color u-line-1 nickname">{{ item.user && item.user.nickname }}</view>
						<view class="u-tips-color u-m-l-20">{{ item.create_date }}</view>
						<view class="u-tips-color u-m-l-20">
							<u-icon name="thumb-up" class="u-m-r-5" color="#909399" size="28"></u-icon>
							{{ item.voteup }}
						</view>
						<!-- <view class="u-tips-color u-m-l-15">评:20</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { tagClick } from '@/common/fa.mixin.js';
export default {
	name: 'fa-article-items',
	mixins: [tagClick],
	props: {
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		//卡片或列表
		isCard: {
			type: Boolean,
			default: true
		},
		showTop: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		numsBackground(item) {
			return item => {
				return item.voteup ? this.theme.bgColor : '#eeeeee';
			};
		},
		numsColor(item) {
			return item => {
				return item.voteup ? this.theme.color : '#666666';
			};
		}
	},
	data() {
		return {};
	},
	methods: {
		openDetail(id) {
			this.$wanlshop.to(`/pages/community/article/detail?id=${id}`)
		}
	}
};
</script>

<style lang="scss">
.article-info {
	width: 100%;
	.flag {
		display: inline-block;
	}
	.user {
		color: #999;
	}
	.price-tag {
		display: inline-block;
		color: #f19049;
		background-color: #fff8e5;
		padding: 4rpx 10rpx;
		border-radius: 6rpx;
		margin-right: 10rpx;
	}
	.images {
		width: 50%;
		height: 200rpx;
		padding: 10rpx 20rpx 10rpx 0;
	}
}

.article-nums {
	height: 100rpx;
	width: 100rpx;
	margin-top: 10rpx;
	margin-right: 15rpx;
	font-size: 28rpx;
	text-align: center;
	line-height: 1.2;
	color: #666;
	flex-shrink: 0;
	background-color: #eeeeee;
	padding: 10rpx 0;
	border-radius: 10rpx;
}

.article-item-active {
	box-shadow: 0 0 5px rgba(0, 134, 243, 0.1);
	border-radius: 3px;
}
.u-avatar-img {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	background-color: #f2f2f2;
	margin-right: 20rpx;
}
.title {
	text {
		-webkit-background-clip: text;
	}
}
</style>
